<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
    <%@ include file="/WEB-INF/jspf/taglibs.jspf"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Insert title here</title>
    <link rel="stylesheet" type="text/css" href="/styles/campaign.css">
<link rel="stylesheet" href="/styles/jquery-ui.css" >
<link rel="stylesheet" href="/styles/blueimp-gallery.css">
<link rel="stylesheet" href="/js/bootstrap/dist/css/bootstrap.css">
<link rel="stylesheet" href="/js/bootstrap-table/dist/bootstrap-table.css">
<link rel="stylesheet" href="/styles/landingPages.css">
<script src="/js/bootstrap/dist/js/bootstrap.min.js"></script>
<script src="/js/bootstrap-table/dist/bootstrap-table.js"></script>
<-- put your locale files after bootstrap-table.js -->
<script src="/js/bootstrap-table/dist/locale/bootstrap-table-zh-CN.js"></script>
<script src="/js/bootstrap/dist/js/bootstrapValidator.js"></script>
    <script type="text/javascript">
        localPath="page"
    </script>
</head>
<body>
<!--一添加提示弹窗开始-->
<div id="addModal" class="modal fade" >
</div><!-- /.modal -->
<div class="p-h-md p-v bg-white box-shadow pos-rlt">
  <h3 class="no-margin have-btn-title">落地页管理</h3>
  <a href="/reports/forms" type="button" class="btn btn-sm btn-primary ng-click-active pull-right add-advert-btn-style">
    查看客资统计
  </a>
  <a href="/front/forms/index" type="button" class="btn btn-sm btn-primary ng-click-active pull-right add-advert-btn-style">
    表单列表
  </a>
  <a href="javascript:add()" type="button" class="btn btn-sm btn-primary ng-click-active pull-right add-advert-btn-style"
     <c:if test="${userContext.member.operationType==2&&userContext.fromBackend==true}">style="display:none"</c:if>
  >
    新建落地页
  </a>
</div>
<div class="p-md landingPageTable-container">
    <table id="landingPageTable" class="table table-bordered table-hover bg-white">
    </table>
</div>

<script type="text/javascript">
function deleteAdGroup(adGroupId,type){
     bootbox.dialog({
        title : "重要提醒!",
        message:"删除本广告,将删除与该广告相关的信息,并数据不可恢复",
        buttons:{
          "success":{
            "label" : "<i class='icon-ok'></i> 确定",
                   "className":"btn-sm btn-success",
             "callback" : function() {
               $.ajax({
                  url: "/ads/delete/"+adGroupId,
                  type: "POST",
                  dataType: "json",
                  cache: false,
                  success: function(data) {
                    if(data="success"){
                        showMsg("success","预算修改成功！");
                        setTimeout("location.reload()", 1000);
                    }

                  }
               })

             }
          }
        }
      });
}

</script>
<script>
$(document).ready(function(){
    var $table = $('#landingPageTable');
    /*$clearn = $('#clearn');
    $addButton = $('#addButton');
    $addModal = $('#addModal');
    $doAddButton = $('#doAddButton');*/
    $table.bootstrapTable({
        url : '/ajax/landing_pages/pages',//后台调用的链接
        //height: getHeight(),//行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
        width : 10,
        method : 'get', //请求方式（*）
        striped : true, //是否显示行间隔色
        cache : false, //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
        pagination : true, //是否显示分页（*）
        sortable : true, //是否启用排序
        sortName : 'createdAt', //排序名称 默认没有
        showColumns : false, //开启显示列选择
        minimumCountColumns : '2', //最少要显示几列
        sortOrder : "desc", //默认排序方式
        sidePagination : "server", //分页方式：client客户端分页，server服务端分页（*）
        pageNumber : 1, //初始化加载第一页，默认第一页
        pageSize : 15, //初始每页的记录行数（*）
        pageList : [15, 25, 50], //可供选择的每页的行数（*）
        clickToSelect : true, //是否启用点击选中行 默认不启用
        uniqueId : "uid", //每一行的唯一标识，一般为主键列
        //search : true, //打开搜索框
        showPaginationSwitch : false, //分组件显示隐藏 默认为true
        //paginationDetailHAlign:'',
        paginationPreText : '上一页',
        paginationNextText : '下一页',
        //formatShowingRows:'Showing %s to %s of %s rows',
        onLoadSuccess : function(data) {
            //如果当前也没有数据就返回第一页
            if (data.rows.length <= 0 && data.offset != 1) {
                $table.bootstrapTable("selectPage", 1);
            }
        },
        columns : [[
            {
                title : '序号',
                field : 'id',
                width: '10%',
               // formatter : index,
                visible : true,
                formatter : index
            }, {
                title : '落地页名称',
                field : 'name',
                width: '40%',
                sortable : true
            },{
                field : 'createdAt',
                title : '创建时间',
                sortable : true,
                width: '40%',
                formatter : formatterTime
            }, {
                field : 'state',
                title : '操作',
                width: '10%',
                sortable : false,
                formatter : view
            }]]
    });
    //时间格式化
    function formatterTime(value, row, index) {
        return formatDate(new Date(value))
    }
    var formatDate= function formatDateTime(date){
        var y = date.getFullYear();  //年
        var m = date.getMonth() + 1;  //月
        m = m < 10 ? ('0' + m) : m;
        var d = date.getDate();  //日
        d = d < 10 ? ('0' + d) : d;
        var h = date.getHours();  //时
        var minute = date.getMinutes(); //分
        minute = minute < 10 ? ('0' + minute) : minute;
        var seconds=date.getSeconds(); //秒
        seconds=seconds<10?('0'+seconds):seconds;
        return y + '-' + m + '-' + d+' '+h+':'+minute+':'+seconds;
    };

    //序号
    function index(value, row, index) {
        return [index + 1].join('')
    }
//自定义方法
    function view(value, row, index) {
        console.log(row)

        var data="";
        if(row.content){
            data+='<span class="" ><a href="/forms/diy_form_datail_diy/'+row.id+' ">预览<i class="m-l-sm"></i></a></span>';
        }
        if(operationType==2&&isFromBackend!=true){
            data+='<span class="" ><a href="/landing_pages/edit/'+row.id+'">编辑<i class="m-l-sm"></i></a></span>';
            data+='<span class="delete-action-btn" ><a href="javascript:deleteLandingPage('+row.id+')">删除<i class="m-l-sm"></i></a></span>';
        }
        return [data].join('')
    }

})
function deleteLandingPage(id){
    $.ajax({
     url: "/landing_pages/delete/"+id,
     type:"POST",
     dataType: 'json',
     success: function (data) {
         if(data=="success"){
             showMsg("success","落地页删除成功！");
             setTimeout("$('#landingPageTable').bootstrapTable('refresh')", 1000);
        }else{
             bootbox.dialog({
                 title: "删除落地页提示",
                 message: "落地页在使用中，无法删除。",
                 buttons: {
                     "success": {
                         "label": "<i class='icon-ok'></i> 确定",
                         "className": "btn-sm btn-primary",
                         "callback": function () {
                             return;
                         }
                     }
                 }
             })
        }
     }
     });
}
    function add(){
        $.ajax({
            url: "/ajax/landing_pages/add",
            type:"GET",
            dataType: 'HTML',
            success: function (data) {
                $("#addModal").html(data);
                $("#addModal").modal("show");

            }
        });

    }
</script>
</body>
</html>